import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import zhCn from "element-plus/es/locale/lang/zh-cn";


import "./assets/css/global.less";
import echarts from "./components/echarts/echarts.vue";
import { createPinia } from "pinia";

const baseSize = 16;
function setRem() {
  const docEl = document.documentElement;
  const clientWidth = docEl.clientWidth;
  const clientHeight = docEl.clientHeight;
  const designWidth = 1920;
  const designHeight = 920;

  const widthRatio = clientWidth / designWidth;
  const heightRatio = clientHeight / designHeight;

  // 选择较小的比例，这样可以确保整个设计在可视区域内
  const rem = Math.min(widthRatio) * baseSize;
  docEl.style.fontSize = rem + "px";
}

setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem();
};
const app = createApp(App);
const store = createPinia();

app
  .use(router)
  .use(store)
  .use(ElementPlus, {
    size: "small",
    locale: zhCn,
  })
  .component("echarts-vue", echarts)
  // .component("VueSlider-vue", VueSlider)
  .mount("#app");
